<template>
  <div class="add-common-user">
    <nav-top title="人工核保" :goback="true"></nav-top>
    <div class="form" v-show="formshow">
      <van-field
        class="input"
        v-model="currentMsg.name"
        label-width="4.687rem"
        placeholder="请输入姓名"
      >
        <span class="input-label" slot="label">姓名*</span>
      </van-field>
      <van-field
        class="input"
        v-model="currentMsg.contact"
        label-width="4.687rem"
        placeholder="请输入微信号/手机"
      >
        <span class="input-label" slot="label">联系方式*</span>
      </van-field>
      <van-field
        class="input"
        v-model="currentMsg.title"
        label-width="4.687rem"
        placeholder="请输入您的疑问"
        autosize
      >
        <span class="input-label" slot="label">您的疑问*</span>
      </van-field>
      <van-field
        class="input"
        v-model="currentMsg.desc"
        label-width="4.687rem"
        type="textarea"
        placeholder="请输入详细的问题描述"
      >
        <span class="input-label" slot="label">问题描述*</span>
      </van-field>
    <van-uploader v-model="fileList" multiple  class='upload' :after-read="afterRead"	 name="uploader" accept="image/*">
      <img v-for="(image,key) in images" :src="image.content" :key="key"/>
      <img src="/static/icon/+.jpg" />
      <van-icon name="arrow" />
    </van-uploader>
    <div class="tipsBox">
      <span class="tips">
        目前仅支持jpg, png格式上传。
      </span>
    </div>
    </div>
    <van-button class="submit" @click="sub" type="primary" size="large" v-show="formshow">提交</van-button>

  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
import axios from 'axios'
import { domain, search } from './../../api'
export default {
  name: "AddCommonUser",
  components: {
    NavTop
  },
  created(){
    const isOK = (title, msg) => {
      this.$dialog.confirm({
        title: title,
        message: msg
      }).then(() => {
        // on confirm
        axios.post(domain+'/api/underwriter/create/order')
        .then((res)=>{
          if(res.data.code==1){
            this.order_no = res.data.data.order_no
            if(res.data.data.total_fee != 0){
              window.location.href = "/pay/mainland?order_no="+this.order_no
            }else{
              this.formshow = true
            }
          }else{
            this.$dialog.alert({
              title: '发生错误',
              message: res.data.msg
            })
          }
        })
        .catch((err)=>{
          this.$dialog.alert({
            title: '发生错误',
            message: err
          })
        })
      }).catch(() => {
        // on cancel
        window.history.back()
      });
    }
    if(search("order_no")){
      this.order_no = search("order_no")
      this.formshow = true
    }else{
      axios.post(domain+'/api/underwriter/query/receive/freecount')
        .then((res)=>{
          if(res.data.code==1){
            console.log(res.data)
            if(res.data.data.free_count>0){
              isOK("免费咨询","你还有" + res.data.data.free_count +"次免费咨询机会，是否确认使用？")
            }else{
              isOK("付费咨询","单次咨询费用为50元" + res.data.data.free_count +"是否购买？")
            }
          }else{
            this.$dialog.alert({
              title: '发生错误',
              message: res.data.msg
            })
          }
        })
        .catch((err)=>{
          this.$dialog.alert({
            title: '发生错误',
            message: err
          })
        })
    }
  },
  data() {
    return {
      formshow: false,
      showSelect: false,
      columns: ['护照', '港澳通行证'],
      currentMsg: {
      },
      order_no: '',
      fileList: [],
      images: [
      ]
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      if(Object.prototype.toString.call(file)=='[object Array]'){
        this.images = file
        console.log(this.images);
      }else{
        this.images.push(file)
      }
    },
    sub(){
      if(this.currentMsg.radio == "1"){
        this.currentMsg.radio = 1 // nan
      }else{
        this.currentMsg.radio = 2 // nv
      }
      console.log(this.currentMsg.fullName)
      if( this.currentMsg.name != undefined && this.currentMsg.contact != undefined && this.currentMsg.title != undefined && this.currentMsg.desc != undefined ){
        // 提交
        let data = {
          title:this.currentMsg.title,
          desc:this.currentMsg.desc,
          name:this.currentMsg.name,
          contact: this.currentMsg.contact,
          images: this.images,
          time: "-",
        }
        axios.post(domain+'/api/underwriter/from?order_no='+this.order_no, data)
        .then((res)=>{
          if(res.data.code==1){
            // 提交成功 跳转到选择页面
             this.$dialog.alert({
              title: '提交成功',
              message: res.data.msg
              
            }).then(()=>{
              window.location.href = "/order"
            })
            
            // window.location.href = "/product/order/select/user"+window.location.search
          }else{
            this.$dialog.alert({
              title: '发生错误',
              message: res.data.msg
            })
          }
        })
        .catch((err)=>{
          this.$dialog.alert({
            title: '发生错误',
            message: err
          })
        })
      }else{
        this.$dialog.alert({
            title: '输入错误',
            message: '所有带有“*”的必须输入'
          })
      }
      
    },
    onConfirm (val) {
      this.currentMsg.certificateType = val;
      this.showSelect = false;
    }
  }
};
</script>
<style lang='scss' scoped>
.add-common-user {
  overflow: hidden;
  overflow-y: auto;
  height: auto;
  background-color: #ffffff;
  .form {
    background-color: #ffffff;
    margin-top: 46px;
    padding-left: 13px;
    padding-right: 13px;
    .select {
      height: 38px;
      border-bottom: 1px solid #ececec;
      .input-label {
        float: left;
        line-height: 41px;
        font-size: 13px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        margin-top: 12px;
      }
      .radio {
        position: relative;
        top: 6px;
        left: 170px;
        .radio-item {
          float: left;
          .radio-title {
            font-size: 11px;
            line-height: 1em;
          }
          .radio-icon {
            position: relative;
            top: 4px;
            left: 8px;
            width: 16px;
            height: 15px;
          }
        }
      }
    }
    .input {
      position: relative;
      padding: 0px;
      padding-top: 9px;
      padding-bottom: 9px;
      border-bottom: 1px solid #ececec;
      font-size: 13px;
      line-height: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      .input-label {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      }
      ::-webkit-input-placeholder {
        color: rgba(214, 214, 214, 1);
      }
      .send-code {
        height: 16px;
        line-height: 1px;
        font-size: 12px;
        background: #fff;
        color: #4d39c6;
        border: none;
      }
    }
  }
  .submit {
    width: 279px;
    height: 44px;
    margin: 83px 20.5px 0 20.5px;
    // position: absolute;
    // left: 21px;
    // bottom: 15px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: #06a44f;
    border: none;
  }
}
.van-radio__icon {
  width: 15px !important;
  height: 15px !important;
  .van-icon {
    width: 15px !important;
    height: 15px !important;
  }
}
.upload {
    // margin-top: 45px;
    width: 281px;
    height: 47px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(222, 222, 222, 1);
    border-radius: 1px;

    img {
      width: 34px;
      height: 34px;
      padding: 7px 0 7px 16px;
    }
    span {
      position: absolute;
      top: 18px;
      left: 68px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(60, 60, 60, 1);
    }
    i {
      float: right;
      padding: 17px 11px;
      color: rgba(155, 155, 155, 1);
    }
  }
  .tipsBox {
    width: 281px;
    height: 30px;
    .tips {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
  }
</style>
